<template>
  <div>
    <Echart
      :options="options"
      height="600px"
      width="470px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        this.options = {
          color: ['#008AFF', '#2FC25B', '#FFF440', '#FB497C'],
          radar: {
            name: {
              show: false
            },
            indicator: [
              {
                name: 'A',
                max: 100
              },
              {
                name: 'B',
                max: 100
              },
              {
                name: 'C',
                max: 100
              },
              {
                name: 'D',
                max: 100
              },
              {
                name: 'E',
                max: 100
              },
              {
                name: 'F',
                max: 100
              },
              {
                name: 'G',
                max: 100
              },
              {
                name: 'H',
                max: 100
              }
            ],
            center: ['50%', '30%'],
            radius: '100%',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          series: [
            {
              type: 'radar',
              areaStyle: {
                opacity: 1,
                shadowBlur: 1,
                shadowColor: 'rgba(0,0,0,.5)'
              },
              emphasis: {
                areaStyle: {
                  opacity: 0
                }
              },
              silent: true,
              data: [
                {
                  value: [0, 0, 0, 100, 100, 99, 0, 0],
                  name: '高风险',
                  symbol: 'circle',
                  symbolSize: 1,
                  label: {
                    show: true,
                    position: [-5, -10],
                    formatter: function(point) {
                      if (point.value === 99) return '—— 5.' + point.name
                      else return ''
                    }
                  }
                },
                {
                  value: [0, 0, 0, 79, 80, 80, 0, 0],
                  name: '一般风险',
                  symbol: 'circle',
                  symbolSize: 1,
                  label: {
                    show: true,
                    position: [-55, -10],
                    formatter: function(point) {
                      if (point.value === 79) return '4.' + point.name + ' ——'
                      else return ''
                    }
                  }
                },
                {
                  value: [0, 0, 0, 60, 60, 59, 0, 0],
                  name: '较大风险',
                  symbol: 'circle',
                  symbolSize: 1,
                  label: {
                    show: true,
                    position: [-5, -10],
                    formatter: function(point) {
                      if (point.value === 59) return '—— 3.' + point.name
                      else return ''
                    }
                  }
                },
                {
                  value: [0, 0, 0, 39, 40, 40, 0, 0],
                  name: '低风险',
                  symbol: 'circle',
                  symbolSize: 1,
                  label: {
                    show: true,
                    position: [-55, -10],
                    formatter: function(point) {
                      if (point.value === 39) return '2.' + point.name + ' ——'
                      else return ''
                    }
                  }
                }
              ]
            }
          ],
          itemStyle: {
            emphasis: {
              show: false,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
